<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 
				1.VUE对象的生命周期函数,可以单独的调用
				2.生命周期的函数名称是固定的,不能随意修改.
			 -->
			用户名: <input type="text" v-model="name"/>
			<button @click="destroyed">销毁</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					name: ''
				},
				methods: {
					destroyed(){
						//手动销毁VUE对象 vue中的对象API使用$调用
						this.$destroy()
					}
				},
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("初始化之后调用-beforeCreate")
				},
				//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
				created(){
					console.log("实力化对象完成,并且完成了配置之后调用created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("数据在备挂载前调用beforeMount")
				},
				//实例被挂载后调用 页面真正的加载完成之后调用
				mounted(){
					console.log("页面加载完成mounted")
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("数据更新时调用beforeUpdate")
				},
				//由于数据更改之后调用
				updated(){
					console.log("数据修改之后调用updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用。
				beforeDestroy(){
					console.log("VUE对象销毁之前调用beforeDestroy")
				},
				//实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
				destroyed(){
					console.log("实例销毁后调用destroyed")
				}
				
			})
		</script>
	</body>
</html>

